<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{block name='title'}}后台管理系统{{/block}} - FastPHP</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- 添加jQuery到头部 -->
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .sidebar {
            min-height: 100vh;
            background-color: #f8f9fa;
            border-right: 1px solid #dee2e6;
        }

        .sidebar .nav-link {
            color: #495057;
        }

        .sidebar .nav-link:hover {
            background-color: #e9ecef;
            color: #007bff;
        }

        .sidebar .nav-link.active {
            background-color: #007bff;
            color: white;
        }

        .content {
            padding: 20px;
        }
    </style>
</head>


<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <nav class="col-md-2 d-none d-md-block sidebar">
                <div class="sidebar-sticky">
                    <div class="p-3 bg-primary text-white">
                        <h5>FastPHP</h5>
                        <p class="text-sm">后台管理系统</p>
                    </div>
                    <ul class="nav flex-column mt-3">
                        <li class="nav-item"> <a class="nav-link {{if $active|default:'index' eq 'index'}}active{{/if}}"
                                href="/admin"> <span data-feather="home"></span> 控制台 </a> </li>
                        <li class="nav-item"> <a class="nav-link {{if $active|default:'users' eq 'users'}}active{{/if}}"
                                href="/admin/users"> <span data-feather="users"></span> 用户管理 </a> </li>
                        <li class="nav-item"> <a class="nav-link" href="#"> <span data-feather="settings"></span> 系统设置
                            </a> </li>
                        <!-- 在侧边栏导航中添加代码生成器链接 -->
                        <li class="nav-item">
                            <a class="nav-link" href="/admin/generator">
                                <i class="fas fa-code"></i>
                                <span>代码生成器</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav> <!-- 主内容区 -->
            <main role="main" class="col-md-10 ml-sm-auto px-4 content">
                <!-- 顶部导航栏 -->
                <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4"> <button class="navbar-toggler"
                        type="button" data-toggle="collapse" data-target="#navbarNav"> <span
                            class="navbar-toggler-icon"></span> </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#"
                                    id="navbarDropdown" role="button" data-toggle="dropdown"> <img
                                        src="https://via.placeholder.com/30" class="rounded-circle mr-2"> 管理员 </a>
                                <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item"
                                        href="#">个人信息</a> <a class="dropdown-item" href="#">修改密码</a>
                                    <div class="dropdown-divider"></div> <a class="dropdown-item text-danger"
                                        href="#">退出登录</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nav> <!-- 页面内容 -->
                <div class="mt-4"> {{block name='content'}}{{/block}} </div>
            </main>
        </div>
    </div>
    
    <!-- 移除底部的jQuery引用，只保留Bootstrap -->
    <!-- <script src="/static/js/jquery-3.7.1.min.js"></script> -->
    <script src="/static/js/bootstrap.min.js"></script>
    
    <script>
        // 简单的图标替代方案          
        document.querySelectorAll('[data-feather]').forEach(function(el) {
            const iconName = el.getAttribute(
                'data-feather');
            const icons = { 'home': '🏠', 'users': '👥', 'settings': '⚙️' };
            el.textContent = icons[iconName] || '📦';
        });
    </script>
</body>

</html>